<template>
<!-- 排行榜界面 -->
    <div class="list">
        <ul class="list_top">
            <ListItem v-for="(item,index) in list" :key="item.id" :item="item" :color_order="index"/>
        </ul>
    </div>
</template>

<script>
import _ from 'underscore'
import ListItem from '@/components/ListItem.vue'

export default {
    components: {
        ListItem,
    },
    data: function(){
        return{
            list: [],
        }
    },
    created: function(){
        this.axios
            .get('https://apis.netstart.cn/music/toplist/detail')
            .then( res => {
                // _.first(array, [n])返回数组前n个数
                this.list =  _.first(res.data.list, 4);
            })
    }

}
</script>

<style lang="less" scoped>
    .list_top{
        padding: 0 10px;
    }

</style>